<template>
  <!-- 选择样板信息 -->
  <div>
    <a-button
      type="primary"
      class="ml12"
      icon="pushpin"
      :loading="requestLoading"
      :disabled="!form.projectId"
      @click="handleOpen()"
      >选择</a-button
    >
    <DialogForm :customFooter="true" ref="dialogForm" headerTitle="选择样板信息" :visible.sync="visible" :width="1200">
      <template slot="formHeader">
        <!-- 搜索 -->
        <searchData ref="searchData" :searchData="searchArr" @search="handleOpen"></searchData>
        <!-- 表格 -->
        <a-table
          rowKey="id"
          :loading="requestLoading"
          :row-selection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
        ></a-table>
      </template>
      <template slot="footer">
        <a-button
          type="primary"
          @click="
            $refs.searchData.form.resetFields()
            visible = false
          "
          class="button_right"
        >
          关闭
        </a-button>
        <a-button type="primary" :disabled="!selectedRowKeys || !selectedRowKeys.length" @click="handleConfirm">
          确认选择
        </a-button>
      </template>
    </DialogForm>
  </div>
</template>

<script>
import { projectImplementationPlan } from '@/api/quality/sample' // api
import DialogForm from '@/components/DialogForm' // 弹窗

export default {
  name: 'ChooseModel',
  components: {
    DialogForm
  },
  data() {
    return {
      visible: false, // 样板信息弹窗显隐控件
      selectedRowKeys: [], // 样板信息选中id集合
      selectedRow: [], // 样板信息选中对象集合
      dataSource: [], // 样板信息列表
      searchArr: [
        // 搜索框
        {
          name: '样板名称',
          type: 'input',
          value: 'name'
        },
        {
          name: '样板部位',
          type: 'input',
          value: 'part'
        },
        {
          name: '计划制作时间',
          type: 'dateRange',
          value: 'makeDate',
          attr: {
            rangeFormat: ['beginDate', 'endDate']
          }
        }
      ],
      columns: [
        {
          title: '样板名称',
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: '样板部位',
          dataIndex: 'part',
          ellipsis: true
        },

        {
          title: '计划制作时间',
          dataIndex: 'makeDate',
          ellipsis: true
        },
        {
          title: '劳务单位',
          dataIndex: 'subcontractor',
          ellipsis: true
        },
        {
          title: '实施要点',
          dataIndex: 'implPoints',
          ellipsis: true
        }
      ], // 试验计划表头
      requestLoading: false // 关联样板名称loading
    }
  },
  props: {
    // 表单
    form: {
      type: Object,
      default: () => ({})
    },
    // 请求标识：0 样板记录；1 样板旁站
    mark: {
      type: [String, Number],
      default: () => 1
    }
  },
  methods: {
    /**
     * @description: 样板信息复选项改变
     * @param {*} selectedRowKeys：选中项
     */
    onSelectChange(selectedRowKeys, selectedRow) {
      // console.log(selectedRowKeys, selectedRow)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    /**
     * @description: 关联样板信息后回调
     */
    handleConfirm() {
      this.$set(this.form, 'choosePlanId', this.selectedRow?.[0]?.id)
      this.$set(this.form, 'chooseName', this.selectedRow?.[0]?.name)
      this.$set(this.form, 'part', this.selectedRow?.[0]?.part)
      this.$set(this.form, 'makeDate', this.selectedRow?.[0]?.makeDate)
      this.$set(this.form, 'subcontractor', this.selectedRow?.[0]?.subcontractor)
      this.$set(this.form, 'subcontractorId', this.selectedRow?.[0]?.subcontractorId)
      this.$set(this.form, 'sampleStatus', '0')
      this.$set(this.form, 'sampleStatusName', '计划内')
      this.$set(this.form, 'planId', this.selectedRow?.[0]?.id)
      this.$nextTick(() => {
        this.$set(this.form, 'monitor', this.selectedRow?.[0]?.monitor)
        this.$set(this.form, 'monitorId', this.selectedRow?.[0]?.monitorId)
        this.$set(this.form, 'name', this.selectedRow?.[0]?.name)
      })
      // 重置搜索表单
      this.$refs.searchData?.form.resetFields()
      this.visible = false
    },
    /**
     * @description: 打开选择试验项目弹窗
     */
    handleOpen(e = {}) {
      this.requestLoading = true
      projectImplementationPlan
        .downPost({
          ...e,
          mark: this.mark, // mark：0 样板记录；1 样板旁站
          projectId: this.form.projectId
        })
        .then((res) => {
          this.requestLoading = false
          this.dataSource = res.data || []
          if (res.code === 200 && res.data?.length) {
            if (this.experimentTable?.details?.length) {
              this.selectedRowKeys = this.experimentTable.details.map((i) => i.id)
            }
            if (!this.visible) {
              this.visible = true
            }
          } else {
            this.$message.warning('没有样板信息可以选择！')
          }
        })
        .catch(() => {
          this.requestLoading = false
        })
    }
  }
}
</script>